<template>
  <div class="main-layout">
    <el-container class="layout-container">
      <!-- 顶部导航栏 -->
      <el-header class="header">
        <div class="header-content">
          <div class="header-left">
            <div class="logo">
              <el-icon class="logo-icon">
                <Grid />
              </el-icon>
              <span class="logo-text">溯源管理平台</span>
            </div>
          </div>

          <div class="header-right">
            <div class="user-info">
              <el-avatar :size="32" class="user-avatar">
                {{ stores.createApp.userName?.charAt(0) || 'U' }}
              </el-avatar>
              <div class="user-details">
                <span class="user-name">{{ stores.createApp.userName || '用户' }}</span>
                <span class="user-role">{{ stores.createApp.roleName || '管理员' }}</span>
              </div>
            </div>

            <el-dropdown @command="handleCommand" class="user-dropdown">
              <el-icon class="dropdown-trigger">
                <ArrowDown />
              </el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">
                    <el-icon>
                      <User />
                    </el-icon>
                    个人资料
                  </el-dropdown-item>
                  <el-dropdown-item command="settings">
                    <el-icon>
                      <Setting />
                    </el-icon>
                    系统设置
                  </el-dropdown-item index="/">
                  <el-dropdown-item divided command="logout">
                    <el-icon>
                      <SwitchButton />
                    </el-icon>
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>

      <el-container class="main-container">
        <!-- 侧边栏 -->
        <el-aside :width="sidebarWidth" class="sidebar">
          <div class="sidebar-content">
            <el-menu :default-active="activeMenu" class="sidebar-menu" :collapse="isCollapse" router>
              <!-- 权限管理 -->
              <el-sub-menu index="permission" class="main-menu-group">
                <template #title>
                  <el-icon class="group-icon">
                    <Key />
                  </el-icon>
                  <span class="group-text">权限管理</span>
                </template>
                <el-menu-item v-if="stores.createApp.roleId == 1" index="/MainView/AddPermission" class="sub-menu-item">
                  <el-icon class="sub-menu-icon">
                    <Plus />
                  </el-icon>
                  <span class="sub-menu-text">添加权限</span>
                </el-menu-item>
                <el-menu-item index="/MainView/PermissionList1" class="sub-menu-item">
                  <el-icon class="sub-menu-icon">
                    <List />
                  </el-icon>
                  <span class="sub-menu-text">权限列表</span>
                </el-menu-item>
                <el-menu-item v-if="stores.createApp.roleId <= 2" index="/MainView/PermissonDetail"
                  class="sub-menu-item">
                  <el-icon class="sub-menu-icon">
                    <Document />
                  </el-icon>
                  <span class="sub-menu-text">权限详情</span>
                </el-menu-item>
              </el-sub-menu>

              <!-- 角色管理 -->
              <el-sub-menu index="role" class="main-menu-group">
                <template #title>
                  <el-icon class="group-icon">
                    <UserFilled />
                  </el-icon>
                  <span class="group-text">角色管理</span>
                </template>
                <el-menu-item index="/MainView/RoleManage" class="sub-menu-item">
                  <el-icon class="sub-menu-icon">
                    <Setting />
                  </el-icon>
                  <span class="sub-menu-text">角色列表</span>
                </el-menu-item>
                <el-menu-item v-if="stores.createApp.roleId == 1" index="/MainView/AddRoleView" class="sub-menu-item">
                  <el-icon class="sub-menu-icon">
                    <Plus />
                  </el-icon>
                  <span class="sub-menu-text">添加角色</span>
                </el-menu-item>
                <el-menu-item v-if="stores.createApp.roleId <= 2" index="/MainView/EditRoleView" class="sub-menu-item">
                  <el-icon class="sub-menu-icon">
                    <Edit />
                  </el-icon>
                  <span class="sub-menu-text">编辑角色</span>
                </el-menu-item>
              </el-sub-menu>

              <!-- 用户管理 -->
              <el-sub-menu index="user" class="main-menu-group">
                <template #title>
                  <el-icon class="group-icon">
                    <Avatar />
                  </el-icon>
                  <span class="group-text">用户管理</span>
                </template>
                <el-menu-item index="/MainView/RoleUserView" class="sub-menu-item">
                  <el-icon class="sub-menu-icon">
                    <List />
                  </el-icon>
                  <span class="sub-menu-text">用户列表</span>
                </el-menu-item>
                <el-menu-item v-if="stores.createApp.roleId == 1" index="/MainView/AddUserView" class="sub-menu-item">
                  <el-icon class="sub-menu-icon">
                    <Plus />
                  </el-icon>
                  <span class="sub-menu-text">添加用户</span>
                </el-menu-item>
                <el-menu-item v-if="stores.createApp.roleId == 1" index="/MainView/AddUserRolePermissonView"
                  class="sub-menu-item">
                  <el-icon class="sub-menu-icon">
                    <Plus />
                  </el-icon>
                  <span class="sub-menu-text">添加用户角色权限</span>
                </el-menu-item>
              </el-sub-menu>
              <!-- 溯源管理 -->
              <el-sub-menu index="traceability" class="main-menu-group">
                <template #title>
                  <el-icon class="group-icon">
                    <DataBoard />
                  </el-icon>
                  <span class="group-text">溯源管理</span>
                </template>
                <el-menu-item index="/MainView/GetBasicView" class="sub-menu-item">
                  <el-icon class="sub-menu-icon">
                    <List />
                  </el-icon>
                  <span class="sub-menu-text">溯源列表</span>
                </el-menu-item>
                <el-menu-item index="/TraceabilityDetail" class="sub-menu-item">
                  <el-icon class="sub-menu-icon">
                    <Document />
                  </el-icon>
                  <span class="sub-menu-text">溯源详情</span>
                </el-menu-item>
              </el-sub-menu>

            </el-menu>
          </div>
        </el-aside>

        <!-- 主内容区域 -->
        <el-main class="main-content">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import axios from 'axios'
import {
  Grid,
  SwitchButton,
  ArrowDown,
  User,
  Setting,
  DataBoard,
  List,
  TrendCharts,
  UserFilled,
  Avatar,
  Tools,
  Key,
  Monitor,
  Plus,
  Document,
  Edit
} from '@element-plus/icons-vue'
import { read } from '@/Until/axiosHepler'
import { useCounterStore } from '@/stores/counter'
import { ElMessage } from 'element-plus'

const stores = useCounterStore()

// 响应式数据
const isCollapse = ref(false)
const activeMenu = ref('/MainView/AddPermission')

// 计算属性
const sidebarWidth = computed(() => isCollapse.value ? '64px' : '240px')

// 处理用户下拉菜单命令
const handleCommand = (command) => {
  switch (command) {
    case 'profile':
      ElMessage.info('个人资料功能开发中...')
      break
    case 'settings':
      ElMessage.info('系统设置功能开发中...')
      break
    case 'logout':
      exit()
      break
  }
}

// 退出登录
const exit = () => {
  ElMessage.success('退出登录成功')
  stores.createApp.userId = 0
  stores.createApp.userName = ""
  stores.createApp.roleId = 0
  stores.createApp.roleName = ""
  stores.createApp.token = ""
  location.href = '/'
}

// 响应式处理
const handleResize = () => {
  if (window.innerWidth < 768) {
    isCollapse.value = true
  } else {
    isCollapse.value = false
  }
}

onMounted(() => {
  handleResize()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>
<style scoped>
.main-layout {
  height: 100vh;
  background: #f5f7fa;
}

.layout-container {
  height: 100vh;
}

/* 头部样式 */
.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 0 24px;
  height: 64px !important;
  line-height: 64px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.header-left {
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  color: white;
  font-size: 20px;
  font-weight: 700;
}

.logo-icon {
  font-size: 24px;
  margin-right: 12px;
  color: #fff;
}

.logo-text {
  background: linear-gradient(45deg, #fff, #e0e7ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
}

.user-avatar {
  background: linear-gradient(135deg, #ff6b6b, #feca57);
  color: white;
  font-weight: 600;
}

.user-details {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}

.user-name {
  font-size: 14px;
  font-weight: 600;
  color: white;
}

.user-role {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.user-dropdown {
  color: white;
  cursor: pointer;
}

.dropdown-trigger {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.user-dropdown:hover .dropdown-trigger {
  transform: rotate(180deg);
}

/* 主容器 */
.main-container {
  height: calc(100vh - 64px);
}

/* 侧边栏样式 */
.sidebar {
  background: white;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  transition: width 0.3s ease;
}

.sidebar-content {
  height: 100%;
  overflow-y: auto;
}

.sidebar-menu {
  border: none;
  height: 100%;
  background: white;
}

/* 主菜单组样式 */
.main-menu-group {
  margin: 8px 12px;
  border-radius: 12px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  overflow: hidden;
  transition: all 0.3s ease;
}

.main-menu-group:hover {
  background: #f0f2ff;
  border-color: #667eea;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.sidebar-menu :deep(.el-sub-menu__title) {
  height: 56px;
  line-height: 56px;
  padding: 0 16px;
  background: transparent;
  border-radius: 12px 12px 0 0;
  transition: all 0.3s ease;
  font-weight: 600;
  color: #2c3e50;
}

.sidebar-menu :deep(.el-sub-menu__title:hover) {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.sidebar-menu :deep(.el-sub-menu__title:hover) .group-icon {
  color: white;
}

.group-icon {
  font-size: 20px;
  margin-right: 12px;
  color: #667eea;
  transition: color 0.3s ease;
}

.group-text {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  transition: color 0.3s ease;
}

/* 子菜单样式 */
.sidebar-menu :deep(.el-sub-menu .el-menu) {
  background: white;
  border-radius: 0 0 12px 12px;
  padding: 8px 0;
}

.sidebar-menu :deep(.el-sub-menu .el-menu-item) {
  height: 44px;
  line-height: 44px;
  margin: 2px 12px;
  padding-left: 20px !important;
  border-radius: 8px;
  transition: all 0.3s ease;
  background: transparent;
}

.sidebar-menu :deep(.el-sub-menu .el-menu-item:hover) {
  background: #f0f2ff;
  color: #667eea;
  transform: translateX(4px);
}

.sidebar-menu :deep(.el-sub-menu .el-menu-item.is-active) {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.sidebar-menu :deep(.el-menu-item),
.sidebar-menu :deep(.el-sub-menu__title) {
  height: 50px;
  line-height: 50px;
  margin: 4px 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.sidebar-menu :deep(.el-menu-item:hover),
.sidebar-menu :deep(.el-sub-menu__title:hover) {
  background: #f0f2ff;
  color: #667eea;
}

.sidebar-menu :deep(.el-menu-item.is-active) {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.sidebar-menu :deep(.el-sub-menu .el-menu-item) {
  height: 40px;
  line-height: 40px;
  margin: 2px 8px;
  padding-left: 40px !important;
}

.menu-icon,
.sub-menu-icon {
  font-size: 18px;
  margin-right: 12px;
  color: #64748b;
}

.sidebar-menu :deep(.el-menu-item.is-active) .menu-icon,
.sidebar-menu :deep(.el-menu-item.is-active) .sub-menu-icon {
  color: white;
}

.menu-text,
.sub-menu-text {
  font-size: 14px;
  font-weight: 500;
}

.sub-menu-icon {
  font-size: 16px;
  margin-right: 10px;
  color: #64748b;
  transition: color 0.3s ease;
}

.sidebar-menu :deep(.el-sub-menu .el-menu-item:hover) .sub-menu-icon {
  color: #667eea;
}

.sidebar-menu :deep(.el-sub-menu .el-menu-item.is-active) .sub-menu-icon {
  color: white;
}

/* 权限管理组特殊样式 */
.sidebar-menu :deep(.el-sub-menu[data-index="permission"]) {
  border-left: 4px solid #4facfe;
}

.sidebar-menu :deep(.el-sub-menu[data-index="permission"] .el-sub-menu__title:hover) {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

/* 角色管理组特殊样式 */
.sidebar-menu :deep(.el-sub-menu[data-index="role"]) {
  border-left: 4px solid #f093fb;
}

.sidebar-menu :deep(.el-sub-menu[data-index="role"] .el-sub-menu__title:hover) {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

/* 用户管理组特殊样式 */
.sidebar-menu :deep(.el-sub-menu[data-index="user"]) {
  border-left: 4px solid #43e97b;
}

.sidebar-menu :deep(.el-sub-menu[data-index="user"] .el-sub-menu__title:hover) {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
}

/* 溯源管理组特殊样式 */
.sidebar-menu :deep(.el-sub-menu[data-index="traceability"]) {
  border-left: 4px solid #ff6b6b;
}

.sidebar-menu :deep(.el-sub-menu[data-index="traceability"] .el-sub-menu__title:hover) {
  background: linear-gradient(135deg, #ff6b6b, #feca57);
}

/* 主内容区域 */
.main-content {
  background: #f5f7fa;
  padding: 24px;
  overflow-y: auto;
}

.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.content-header {
  text-align: center;
  margin-bottom: 32px;
}

.content-title {
  font-size: 32px;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.content-subtitle {
  font-size: 16px;
  color: #64748b;
  margin: 0;
}

/* 仪表板卡片 */
.dashboard-cards {
  margin-top: 32px;
}

.dashboard-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  height: 120px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.dashboard-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.user-icon {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.role-icon {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.permission-icon {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.system-icon {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
}

.card-content h3 {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 8px 0;
  font-weight: 500;
}

.card-number {
  font-size: 28px;
  font-weight: 700;
  color: #1a202c;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header {
    padding: 0 16px;
  }

  .logo-text {
    display: none;
  }

  .user-details {
    display: none;
  }

  .main-content {
    padding: 16px;
  }

  .content-title {
    font-size: 24px;
  }

  .dashboard-cards .el-col {
    margin-bottom: 16px;
  }

  .dashboard-card {
    height: auto;
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }

  .card-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }

  /* 移动端菜单样式调整 */
  .main-menu-group {
    margin: 4px 8px;
  }

  .sidebar-menu :deep(.el-sub-menu__title) {
    height: 48px;
    line-height: 48px;
    padding: 0 12px;
  }

  .sidebar-menu :deep(.el-sub-menu .el-menu-item) {
    height: 40px;
    line-height: 40px;
    margin: 1px 8px;
    padding-left: 16px !important;
  }

  .group-text {
    font-size: 14px;
  }

  .sub-menu-text {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .dashboard-cards .el-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .content-title {
    font-size: 20px;
  }

  .content-subtitle {
    font-size: 14px;
  }
}

/* 滚动条样式 */
.sidebar-content::-webkit-scrollbar {
  width: 4px;
}

.sidebar-content::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.sidebar-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}

.sidebar-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
